<!DOCTYPE HTML>
<html>
<head>
    <!-- support for mobile touch devices -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="../cornerstone.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            Stack Image Index Synchronizer Example
        </h1>
        <p>
            This page contains an example of the stack image index synchronizer tool.  It uses the index of the
            image in the stack to synchronize.  You may want to use this if the images don't have the
            image position attribute.
        </p>

    </div>

    <div class="row">
        <div class="col-xs-2">
            <ul class="list-group">
                <a id="add" class="list-group-item active">Add All</a>
                <a id="remove" class="list-group-item">Remove All</a>
                <a id="add3" class="list-group-item">Add 3rd</a>
                <a id="remove3" class="list-group-item">Remove 3rd</a>
            </ul>
        </div>
        <div class="col-xs-10">
            <div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
                 oncontextmenu="return false"
                 class='cornerstone-enabled-image'
                 unselectable='on'
                 onselectstart='return false;'
                 onmousedown='return false;'>
                <div id="axial1"
                     style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
                </div>
            </div>
            <div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
                 oncontextmenu="return false"
                 class='cornerstone-enabled-image'
                 unselectable='on'
                 onselectstart='return false;'
                 onmousedown='return false;'>
                <div id="axial2"
                     style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
                </div>
            </div>
            <div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
                 oncontextmenu="return false"
                 class='cornerstone-enabled-image'
                 unselectable='on'
                 onselectstart='return false;'
                 onmousedown='return false;'>
                <div id="axial3"
                     style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>
<script src="../cornerstoneMath.min.js"></script>

<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>
<script>window.cornerstoneTools || document.write('<script src="https://unpkg.com/cornerstone-tools">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>
<script src="../exampleMetaDataProvider.js"></script>

<script>
    var axialElement1 = document.getElementById('axial1');
    var axialElement2 = document.getElementById('axial2');
    var axialElement3 = document.getElementById('axial3');

    var axialImageIds = [
        'example://1',
        'example://2'
    ]

    var axialStack1 = {
        currentImageIdIndex : 0,
        imageIds: axialImageIds
    };
    var axialStack2 = {
        currentImageIdIndex : 0,
        imageIds: axialImageIds
    };
    var axialStack3 = {
        currentImageIdIndex : 0,
        imageIds: axialImageIds
    };
    var synchronizer = new cornerstoneTools.Synchronizer("cornerstonenewimage", cornerstoneTools.stackImageIndexSynchronizer);

    // image enable the dicomImage element and the mouse inputs
    cornerstone.enable(axialElement1);
    cornerstone.enable(axialElement2);
    cornerstone.enable(axialElement3);

    cornerstoneTools.mouseInput.enable(axialElement1);
    cornerstoneTools.mouseWheelInput.enable(axialElement1);
    cornerstoneTools.mouseInput.enable(axialElement2);
    cornerstoneTools.mouseWheelInput.enable(axialElement2);
    cornerstoneTools.mouseInput.enable(axialElement3);
    cornerstoneTools.mouseWheelInput.enable(axialElement3);

    cornerstone.loadImage(axialImageIds[0]).then(function(image) {
        // display this image
        cornerstone.displayImage(axialElement1, image);
        cornerstone.displayImage(axialElement2, image);
        cornerstone.displayImage(axialElement3, image);

        // set the stack as tool state
        cornerstoneTools.addStackStateManager(axialElement1, ['stack']);
        cornerstoneTools.addStackStateManager(axialElement2, ['stack']);
        cornerstoneTools.addStackStateManager(axialElement3, ['stack']);
        cornerstoneTools.addToolState(axialElement1, 'stack', axialStack1);
        cornerstoneTools.addToolState(axialElement2, 'stack', axialStack2);
        cornerstoneTools.addToolState(axialElement3, 'stack', axialStack3);

        // Enable all tools we want to use with this element
        cornerstoneTools.stackScroll.activate(axialElement1, 1);
        cornerstoneTools.stackScrollWheel.activate(axialElement1);
        cornerstoneTools.stackScroll.activate(axialElement2, 1);
        cornerstoneTools.stackScrollWheel.activate(axialElement2);
        cornerstoneTools.stackScroll.activate(axialElement3, 1);
        cornerstoneTools.stackScrollWheel.activate(axialElement3);

        synchronizer.add(axialElement1);
        synchronizer.add(axialElement2);
        synchronizer.add(axialElement3);

        function activate(id)
        {
            document.querySelectorAll('a').forEach(function(elem) { elem.classList.remove('active'); });
            document.getElementById(id).classList.add('active');
        }
        document.getElementById('add').addEventListener('click', function() {
            activate("add");
            synchronizer.add(axialElement1);
            synchronizer.add(axialElement2);
            synchronizer.add(axialElement3);
            return false;
        });
        document.getElementById('remove').addEventListener('click', function() {
            activate("remove");
            synchronizer.remove(axialElement1);
            synchronizer.remove(axialElement2);
            synchronizer.remove(axialElement3);
            return false;
        });
        document.getElementById('add3').addEventListener('click', function() {
            activate("add3");
            synchronizer.add(axialElement3);
            return false;
        });
        document.getElementById('remove3').addEventListener('click', function() {
            activate("remove3");
            synchronizer.remove(axialElement3);
            return false;
        });

    });


</script>
</html>
